const path = require('path')
const resolve = filePath => path.resolve(__dirname, './', filePath)
const {DefinePlugin} = require('webpack')
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin')
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
const DllReferencePlugin = require("webpack/lib/DllReferencePlugin.js");
const {getDllName} = require('./dll/dll.utils')

const config = {
    // 单页面应用title
    title: 'BASE应用',
    // 每个应用的唯一标识，没有格式限制，只能用下划线命名，因为最后会输出为一个变量名
    APP_NAME: 'PLAIN_BASE_APPLICATION',
    // 部署路径
    publicPath: '/template-plain-react-micro-base/',
    // publicPath: '/',    // 部署路径
}

const createAssetWebpackPlugin = (assets) => {
    return new AddAssetHtmlWebpackPlugin((assets || []).filter(Boolean).map(item => ({
        filepath: resolve(item),
        typeOfAsset: item.indexOf('.css') > -1 ? 'css' : 'js'
    })))
}

module.exports = {
    publicPath: config.publicPath,
    outputDir: resolve('docs'),
    lintOnSave: false,
    devServer: {
        port: '3120',
        disableHostCheck: true,                         // 关闭主机检查，使微应用可以被 fetch
        headers: {"Access-Control-Allow-Origin": "*",}, // 因为应用之间需要互相加载，本地联调的时候需要配置跨域
    },
    configureWebpack: {
        module: {
            rules: [
                {
                    test: /\.md$/,
                    use: ['text-loader'],
                },
            ],
        },
        resolve: {
            extensions: ['.ts', '.tsx', 'js', 'jsx', 'json'],
        },
        output: {
            library: `CustomApplication${config.APP_NAME}`,             // 微应用的包名，这里与主应用中注册的微应用名称一致
            libraryTarget: "umd",                                       // 将你的 library 暴露为所有的模块定义下都可运行的方式
            jsonpFunction: `webpackJsonp_${config.APP_NAME}_project`,   // 按需加载相关，设置为 webpackJsonp_#{APP_NAME}_project 即可
        },
        plugins: [
            new DefinePlugin({
                // APP_ENV: JSON.stringify(require(resolve(`src/env/config/${process.env.APP_ENV}.js`)))
            }),
            new DllReferencePlugin({manifest: require("./dll/dll-vendor.manifest.json"),}),
            createAssetWebpackPlugin([
                // 'src/lib/markdown/markdown-it-attrs.js',
                // 'src/lib/prism/prism.js', 'src/lib/prism/prism.css',
                'public/static/react.production.min.js', 'public/static/react-dom.production.min.js',
                `dll/${getDllName()}`,
            ]),
            new MonacoWebpackPlugin(),
        ],
        externals: {
            react: {
                root: 'React',
                commonjs: 'react',
                commonjs2: 'react',
            },
            'react-dom': {
                root: 'ReactDOM',
                commonjs: 'react-dom',
                commonjs2: 'react-dom',
            },
        },
    },
    pages: {
        index: {
            entry: resolve('src/main'),
            template: 'public/index.html',
            filename: 'index.html',
            title: config.title,
            chunks: ['chunk-vendors', 'chunk-common', 'index'],
        },
        base: {
            entry: resolve('src/base'),
            template: 'public/index.html',
            filename: 'base.html',
            title: config.title,
            chunks: ['chunk-vendors', 'chunk-common', 'base'],
        },
    },
    chainWebpack(config) {
        config.resolve.alias
            .set('@', resolve('src'))
            .set('src', resolve('src'))
            .set('plain-design-composition/src/index', resolve('abc'))
        // .set('plain-micro-application', 'plain-micro-application/src/index.ts')

        config.plugins
            .delete('prefetch-index')
            .delete('preload-index')
    },
    css: {
        loaderOptions: {
            less: {
                additionalData: `@import "src/variables.less";`,
            }
        }
    },
}
